<template>
  <div class="test01" >
    <canvas class="canvas" ref="canvas" :width="rect?.width" :height="rect?.height"></canvas>
  </div>
</template>
<script lang="ts">
import { Vue,  Options, Emit } from 'vue-property-decorator';
@Options({ components: {} })
export default class CanvasTest01 extends Vue {
  public rect: DOMRect|null=null;
  public ctx: CanvasRenderingContext2D|null=null;

  public draw() {
    console.log(this.ctx);
    this.ctx!.fillRect(50, 50, 200, 200);
    this.ctx!.fillStyle = 'blue';
  }
  public mounted() {
    this.rect = (this.$el as HTMLDivElement).getBoundingClientRect();
    this.ctx =  (this.$refs.canvas as HTMLCanvasElement).getContext('2d');
    this.draw();
  }
}
</script>
<style scoped lang="postcss">
.test01{
  position: absolute;
  width: 100%;height: 100%;
  background-color: pink;
  .canvas{
    position: absolute;
    left: 0;top: 0;
    width: 100%;height: 100%;
  }
}
</style>
